<template>
  <div class="sort">
    <div class="sort-wz">填写并核对订单信息</div>
    <!-- 交货日期 -->
    <div class="sort-time">
      <div class="time">交货日期 :</div>
      <div class="dates">
          <span class="block">
            <el-date-picker
              v-model="startDate"
              type="date"
              placeholder="请选择交货日期">
            </el-date-picker>
        </span>
      </div>
    </div>
    <!-- 配送方式 -->
    <div class="mode">
      <span>配送方式:</span>
      <el-select class="inputs" v-model="value" placeholder="请选择配送方式">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :picker-options="pickerOptions">
        </el-option>
      </el-select>
    </div>
    <!-- 收货地址 -->
    <div class="shipping">
      <span>收货地址:</span>{{addresss}}
      <span  style="width:.5rem; height:.3rem; background:red"></span>
      <span> {{goodsList}}{{num}}</span>
      <el-button type="text" @click="dialogFormVisible = true">新增收货地址</el-button>
      <el-dialog title="新增收货地址" :visible.sync="dialogFormVisible" class="eldialog">
        <el-form >

          <el-form-item label="收货人 :" :label-width="formLabelWidth">
            <input v-model="name" auto-complete="off" placeholder="请填写收货人" class="city_details"/>
          </el-form-item>

          <el-form-item label="联系电话 :" :label-width="formLabelWidth">
            <input v-model="phone" auto-complete="off" placeholder="请填写联系电话" class="city_details"/>
          </el-form-item>

          <el-form-item label="所在地区:" :label-width="formLabelWidth">
            <v-distpicker style=" margin-left:145px; float:left" :province="province" :city="city" :area="area" :placeholder="placeholder"  @selected="onSelected" id="city"></v-distpicker>
          </el-form-item>

          <el-form-item label="详细地址 :" :label-width="formLabelWidth">
            <input :name="cites" type="text" v-model="cityDetails" @change="thisBlur" @blur="thisBlur" class="city_details" placeholder="填写详细地址"/>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisibles" >确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 备注 -->
    <div class="remark">
      <span>备注:</span>
      <input placeholder="如有需要，请备注"/>
    </div>
    <!-- <video-player v-if="isInitVideo"  class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)">
    </video-player>
    <template class="fang" >
          <div class="stop">
            <a class="btn-trial2" href="javascript:;" @click="play()">{{btnPlayName}}</a>
          </div>
    </template> -->
    <v-footer style="position:relative; top:2.9rem;"></v-footer>
  </div>
</template>

<script>
import footer from './footer'
import VDistpicker from 'v-distpicker'
import {submitOrder} from '../service/api'
import {mapGetters} from 'vuex'
// import VideoPlayer from 'vue-video-player'
export default {
  data () {
    return {
      msg: '1111',
      startDate: '',
      cites: '',
      cityDetails: '', // 详情的内容
      upNum: 0,
      props: ['cites'],
      province: '',
      city: '',
      area: '',
      citys: '', // 传递给父组件的值
      placeholder: {
        province: '请选择所在省份',
        city: '请选择所在城市',
        area: '请选择所在地区'
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      name: '',
      phone: '',
      addresss: '',
      delivery: false,
      type: [],
      formLabelWidth: '120px'
      // playerOptions: {
      //   start: 0,
      //   playsinline: false,
      //   playbackRates: [0.5, 1, 1.5, 2, 3],
      //   autoplay: false,
      //   muted: false,
      //   loop: false,
      //   preload: 'auto',
      //   language: 'zh-CN',
      //   fluid: true,
      //   // aspectRatio: '16:9',
      //   sources: [{
      //     type: 'video/mp4',
      //     src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
      //     // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
      //   }],
      //   poster: '/static/logo.png',
      //   notSupportedMessage: '此视频暂无法播放，请稍后再试',
      //   controlBar: {
      //     captionsButton: false,
      //     chaptersButton: false,
      //     liveDisplay: false,
      //     playbackRateMenuButton: true,
      //     subtitlesButton: false
      //     // timeDivider: true,
      //     // durationDisplay: true,
      //     // remainingTimeDisplay: false,
      //     // fullscreenToggle: true
      //   }
      // },
      // isInitVideo: true
    }
  },
  computed: {
    ...mapGetters(['num', 'goodsList'])
    // player () {
    //   return this.$refs.videoPlayer.player
    // }
  },
  updated: function () {
    if (this.upNum === 0) {
      if (this.cites !== '') {
        // 先分割
        let china = this.cites.split(/(省|自治区|市|特别行政区)/)

        // 取出省
        let province = china[0] + china[1]

        // 在删除省 在分割
        let ttt = china.splice(2).join().split(/(市辖区|市|区|盟|自治州)/)

        // 取出市
        let citybefore = ttt[0] + ttt[1]
        let actionCity = citybefore.split(',').join('')

        // 在删除市 取出详情
        let details = ttt.splice(2).join()

        // 如果他们满足条件就让他们市为市辖区
        if (province === '北京市' || province === '上海市' || province === '天津市' || province === '重庆市') {
          actionCity = '市辖区'
          details = details.substr(5)
        }

        // 正常子父组件中传值  给子组件  子组件在mounted中获取不动啊, 所以要让他触发updated函数

        //  默认的省
        this.province = province
        //  默认的市
        this.city = actionCity

        // 详细 // 最终形成的就是详情
        this.cityDetails = details.split(',').join('')
      }
    }
    this.upNum++
  },
  mounted () {
  },
  methods: {
    // ...mapMutations(['num', 'goodsList']),
    toLetterList (val) {
      let scrollDiv,
        oDiv,
        pTop
      scrollDiv = document.getElementById('scrollDiv')
      oDiv = document.getElementById('address' + val)
      pTop = window.getComputedStyle(scrollDiv, null).paddingTop
      // 当前元素不存时,退出
      if (!oDiv) {
        return
      }
      pTop = pTop.replace('px', '')
      let top = oDiv.offsetTop
      scrollDiv.scrollTop = top - pTop
    },
    play: function (url) {
      if (url) {
        // this.imgPreview(url)
      } else {
        // this.playVideo(url)
      }
    },
    onPlayerPlay (player) {
      // alert("play")
      // return player === '播放'
    },
    onPlayerPause (player) {
      // alert("pause")
    },
    onSelected: function (data) {
      this.citys = data.province.value + data.city.value + data.area.value
      this.$emit('city', this.citys + this.cityDetails)
      console.log('this.citys', this.citys)
    },
    thisBlur: function () {
      this.$emit('city', this.citys + this.cityDetails)
      this.addresss = this.citys + this.cityDetails
      // console.log('good', this.addresss)
    },
    dialogFormVisibles () {
      if (!this.name || !this.phone || !this.citys || !this.cityDetails) {
        this.$message({
          message: '请填写完整'
        })
      }
      submitOrder(this.name, this.phone, this.citys, this.cityDetails).then(d => {
        if (d === 200) {
          this.$message({
            message: '提交成功',
            onClose: () => {
            }
          })
        }
      })
    }
  },
  components: {
    VDistpicker,
    'v-footer': footer
  }
}
</script>

<style scoped lang="less">
.sort{
  position: relative;
  top:1.5rem;
  width:85%;
  height:100%;
  margin:0 auto;
  font-size: .2rem;
  .sort-wz{
    position: absolute;
    top:.3rem;
    font-size: .28rem;
    color:rgb(107, 36, 102);
  }
  .sort-time{
    width:50%;
    height:.7rem;
    position: relative;
    top:1rem;
    background: red;
    .time{
      float:left;
      position: relative;
      top:.1rem;
    }
    .dates{
      width:50%;
      float:left;
      position: relative;
      left:10%;
      top:.05rem;
    }
  }
  .mode{
    width:50%;
    height:.5rem;
    background: pink;
    position: relative;
    top:1rem;
    span{
      float:left
    }
    .inputs{
      width:50%;
      position: relative;
      left:-7%;
    }
  }
  .shipping{
    width:80%;
    height:.5rem;
    background: teal;
    position: relative;
    top:1rem;
    span{
      float:left
    }
    .eldialog{
      margin-top:1rem;
      .city_details{
        width:80%;
        height:.35rem;
        position: relative;
        left:-6%;
        border-radius: .1rem;
        border:1px solid lightgray;
        padding:0 0 0 .2rem;
        outline: 0;
      }
    }
  }
  .remark{
    width:80%;
    height:.5rem;
    background: green;
    position: relative;
    top:1rem;
    span{
      float: left
    }
    input{
      width:80%;
      height:.35rem;
      position: relative;
      left:4%;
      font-size: .2rem;
    }
  }
}
</style>
